<template>
  <div>
    v-if与v-for不能放于同一标签的问题
    <br>
    <!-- 只显示>10的项 -->
    <template v-for="item in 20">
      <div v-if="item > 10" :key="item">{{ item }}</div>
    </template>
    <!-- vue2.x先执行v-for再执行v-if ,vue3.x 先执行v-if-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
      ]
    }
  },
  computed: {
    newArr() {
      return arr.filter((item) => item > 10)
    }
  }
}
</script>
<style></style>
